<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-25 15:19:05
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-26 15:29:27
 * @FilePath: \后端管理系统\app\src\views\Goods\Categories.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <MyBreadcrumb :breadList="$route.meta.breadList" />
    <el-card class="box-card">
      <el-alert
        title="注意:只允许为第三级分类设置相关参数"
        type="warning"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-row class="selectCategory">
        <el-col>
          <span>选择商品分类:</span>

          <el-cascader
            v-model="selectedKeys"
            :options="options"
            :props="cascaderProps"
            @change="categoryChange"
          ></el-cascader>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <!-- 标签页组件 -->
          <ParamsTabPane
          :table-data='manyTableData'
          :title-text="titleText"
          :category-id="categoryId"
          :is-btn-disabled="isBtnDisabled"
          ></ParamsTabPane>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
            <ParamsTabPane
          :table-data='onlyTableData'
          :title-text="titleText"
          :category-id="categoryId"
          :is-btn-disabled="isBtnDisabled"
          ></ParamsTabPane>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import MyBreadcrumb from "../../components/MyBreadcrumb.vue";
import ParamsTabPane from './component/ParamsComponent/ParamsTabPane.vue'
import { httpCateGoriesList ,httpGetCategoryParams} from "../../api/categories";
export default {
  components: {
    MyBreadcrumb,
    ParamsTabPane
  },

  data() {
    return {
      options: [], //分类参数列表
      cascaderProps: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
        checkStrictly: true,
      },
      selectedKeys: [], //连级选择框中的选中数组
      activeName:'many',
      manyTableData:[],//动态参数数据
      onlyTableData:[],//静态参数数据
    };
  },
  created() {
    this.getCategoriesList();
  },
  computed: {
      isBtnDisabled() {
        return this.selectedKeys.length !== 3;
      },
      categoryId() {
        if (this.selectedKeys.length === 3) {
          return this.selectedKeys[2];
        }
        return null;
      },
      titleText() {
        return this.activeName === 'many' ? '动态参数' : '静态属性';
      }
    },
  methods: {
    async getCategoriesList() {
      const res = await httpCateGoriesList("/categories");
      console.log(res);
      this.options = res.data.data;
    },
    // tab标签点击事件
    handleClick(){
      console.log(this.activeName,'111');
      this.getCategoryParams();
    },
    // 选则项发生变化触发的函数
    categoryChange() {
      // 只允许选择第三级分类
      let selectedKeys = this.selectedKeys;
      console.log(selectedKeys);
      if (selectedKeys.length < 3) {
        this.selectedKeys = [];
        return;
      }
      this.getCategoryParams();
    },
    // 获取参数列表
   async getCategoryParams(){
    console.log(this.categoryId)
    // 添加
    // const value={attr_sel:`${this.activeName}`,attr_name:this.activeName};
    //   const res=await httpAddParam(`categories/${this.categoryId}/attributes`,value);
    //   console.log(res)
    //       if (this.activeName === 'many') {
    //         this.manyTableData = res.data.data;
    //       } else {
    //         this.onlyTableData = res.data.data;
    //       }
    const res=await httpGetCategoryParams(`categories/${this.categoryId}/attributes`,{sel:this.activeName});
     if (this.activeName === 'many') {
            this.manyTableData = res.data.data;
          } else {
            this.onlyTableData = res.data.data;
          }
    }
    
  },
};
</script>

<style>
.box-card,
.selectCategory {
  margin-top: 20px;
}
</style>